/* 全局样式重置 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #ffffff;
  line-height: 1.6;
  height: 100vh;
  overflow: hidden;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* 全局变量 - 统一控制宽度 */
:root {
  --sidebar-width: 260px;  /* 侧边栏宽度 */
  --toc-width: 260px;      /* 目录宽度 */
  --scrollbar-width: 10px; /* 滚动条宽度 */
  
  /* 注意：响应式断点宽度在 JavaScript 中定义为常量 */
  /* MOBILE_BREAKPOINT = 760px - 移动端断点（侧边栏隐藏、目录关闭） */
  /* SIDEBAR_COLLAPSE_BREAKPOINT = 1200px - 侧边栏自动折叠断点 */
}

/* 应用布局 */
.app-layout {
  display: flex;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* 可调整大小的侧栏容器 */
.resizable-sidebar-container {
  display: flex;
  height: 100vh;
  position: relative;
  flex-shrink: 0;
}


/* 确保resize-handle在正确的层级 */
.resizable-sidebar-container:not(.collapsed) {
  padding-right: 0; /* 确保有空间给resize-handle */
}

/* ---------- 裁剪层 ---------- */
.sidebar-clipper {
  position: absolute;          /* 占据容器左侧 */
  top: 0; 
  bottom: 0; 
  left: 0;
  overflow: hidden;            /* 负责裁剪上下边界 */
  width: var(--sidebar-width, 280px);
  display: flex;               /* 让 inner 撑满 */
  /* 【动画时间1】上下收缩动画时间 */
  transition: top 0.2s ease, bottom 0.2s ease, width 0.2s ease;
}

/* ---------- 真正的侧栏 ---------- */
.sidebar-inner {
  flex: 1 0 100%;
  background: #F9F8F7;
  display: flex; 
  flex-direction: column;
  height: 100%;  /* 改为100%，跟随父容器高度 */
  border-right: 2px solid #F0EFEE;  /* 侧栏右侧分界线：2px粗细，浅灰色 */
  position: relative;
  z-index: 1000;
  /* 【动画时间2】左侧栏左移动画时间（非浮动状态） */
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ---------- 遮挡片，盖住圆角 & 投影 ---------- */
.sidebar-cap {
  position: absolute; 
  left: 0; 
  right: 0;
  height: 15px; 
  background: #F9F8F7; 
  pointer-events: none;
}
.sidebar-cap.top { top: -15px; }
.sidebar-cap.bottom { bottom: -15px; }

/* ---------- 折叠 / 展开动画：顶、底往里收 ---------- */
.resizable-sidebar-container.animating .sidebar-clipper,
.resizable-sidebar-container.expanding .sidebar-clipper {
  /* 动画期间应用圆角 */
  border-radius: 0 12px 12px 0;
}

.resizable-sidebar-container.animating.in-animation .sidebar-clipper,
.resizable-sidebar-container.expanding.in-expansion .sidebar-clipper {
  top: 10vh;               /* "往中间收" 的关键：裁剪层上下各缩 10vh */
  bottom: 10vh;
}

.resizable-sidebar-container.expanding.in-expansion .sidebar-clipper {
  top: 0; 
  bottom: 0;        /* 动画结束复位 */
  border-radius: 0;
}

/* ---------- 折叠完成后的浮动状态 ---------- */
.sidebar-clipper.floating {
  position: fixed !important;
  left: 0; 
  top: 10vh; 
  bottom: 10vh;
  /* 【阴影效果】浮动状态下显示阴影和圆角 */
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15) !important;
  border-radius: 0 12px 12px 0 !important;
  z-index: 1001;
  /* 【动画时间3】浮动状态下左移动画时间（鼠标触发显示/隐藏） */
  transition: transform 0.2s ease;
}

/* ---------- X 方向位移 ---------- */
.sidebar-clipper.collapsed { 
  transform: translateX(-100%); 
}           
.sidebar-clipper.peek { 
  transform: translateX(calc(-100% + 59px)); 
}
.sidebar-clipper.visible { 
  transform: none; 
}

/* 确保内层侧栏在正常状态下不做X向变换 */
.sidebar-inner {
  transform: none;
}

/* 拖拽调整大小的把手 */
.resize-handle {
  width: 0;
  cursor: col-resize;
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--sidebar-width); /* 默认位置，会被JavaScript动态更新 */
  flex-shrink: 0;
  z-index: 1002; /* 确保在侧栏上方 */
}

.resize-handle:hover::after,
.resize-handle.resizing::after {
  content: '';
  position: absolute;
  top: 0;
  left: -1.5px;
  bottom: 0;
  width: 3px;
  background-color: #DFDEDD;
  pointer-events: none;
}

/* 鼠标悬停时的扩展点击区域 */
.resize-handle::before {
  content: '';
  position: absolute;
  top: 0;
  left: -5px;
  right: -5px;
  bottom: 0;
  cursor: col-resize;
}

/* 拖拽时的视觉反馈 */
.resize-handle.resizing::after {
  box-shadow: 0 0 4px rgba(223, 222, 221, 0.5);
}

/* 防止在拖拽时选择文本 */
.resizable-sidebar-container.resizing {
  user-select: none;
}

/* 拖拽时禁用所有过渡动画，确保边界同步移动 */
.resizable-sidebar-container.resizing .sidebar-clipper,
.resizable-sidebar-container.resizing .sidebar-inner,
.resizable-sidebar-container.resizing .resize-handle::after {
  transition: none !important;
}

/* 侧栏样式 */
.sidebar {
  width: 100%;
  background-color: #F9F8F7;
  display: flex;
  flex-direction: column;
  height: 100%;  /* 改为100%，跟随父容器高度 */
  position: relative;
}

.sidebar.collapsed {
  min-width: 60px;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  height: 50px;
  box-sizing: border-box;
  border-bottom: 2px solid #F0EFEE;  /* 侧栏头部底部分界线：2px粗细，浅灰色 */
  background-color: #F9F8F7;
  min-width: 0;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 600;
  color: #32302C;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}


.sidebar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
}

.pages-section {
  flex: 1;
  padding: 16px 8px;
  overflow-y: auto;
  min-height: 0;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: #5F5E5B;
  margin: 0 0 8px 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-tree {
  display: flex;
  flex-direction: column;
}

.page-item {
  margin-bottom: 0px;
}

.page-title {
  display: flex;
  align-items: center;
  padding: 6px 12px;
  margin: 2px 8px;
  cursor: pointer;
  color: #5F5E5B;
  font-size: 15px;
  transition: all 0.2s ease;
  border-radius: 8px;
  position: relative;
}

.page-title:hover {
  background-color: #F1F0EF;
  color: #5F5E5B;
}

.page-title.active {
  background-color: #E9E8E7;
  color: #32302C;
}

.page-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
}

/* 图标容器 - 统一所有图标的尺寸和对齐 */
.icon-container {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 4px;
  flex-shrink: 0;
  font-size: 16px; /* emoji 和 Font Awesome 图标的默认大小 */
}

/* 确保所有类型的图标都正确对齐 */
.page-name svg,
.page-name img {
  margin-right: 4px;
  flex-shrink: 0;
}

/* Font Awesome 图标在容器中的样式 */
.icon-container i {
  font-size: inherit;
}

.sidebar-footer {
  padding: 16px;
  border-top: 2px solid #F0EFEE;  /* 侧栏底部顶部分界线：2px粗细，浅灰色 */
  flex-shrink: 0;
  background-color: #F9F8F7;
  min-width: 0;
  margin-top: auto;  /* 确保 footer 始终在底部 */
}

.new-page-btn {
  width: 100%;
  padding: 12px;
  background-color: #32302C;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.new-page-btn:hover {
  background-color: #5F5E5B;
}

.new-page-btn svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.new-page-btn span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 主内容区 */
.main-content {
  margin-left: var(--sidebar-width, 280px);
  transition: margin-left 0.3s ease;
  flex: 1;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  height: 100vh;
}

/* 当侧栏折叠状态时，移除左边距让内容占满 */
.app-layout.sidebar-collapsed .main-content,
.app-layout.sidebar-animating .main-content {
  margin-left: 0;
}

/* 拖拽时禁用右侧内容区的过渡动画，确保边界同步 */
.resizable-sidebar-container.resizing ~ .main-content {
  transition: none !important;
}

/* 主内容区顶栏 */
.content-header {
  height: 50px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-bottom: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  flex-shrink: 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.breadcrumb-container {
  display: flex;
  align-items: center;
}

.breadcrumb-button {
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #32302C;
  transition: background-color 0.2s ease;
}

.breadcrumb-button:hover {
  background-color: #F0EFED;
}

.breadcrumb-button:focus {
  outline: none;
}

.breadcrumb-icon {
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 面包屑中的图标容器 */
.breadcrumb-icon .icon-container {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0;
}

/* 面包屑中的SVG和img图标样式 */
.breadcrumb-icon svg,
.breadcrumb-icon img {
  width: 18px;
  height: 18px;
  display: block;
}

/* 面包屑中的Font Awesome图标 */
.breadcrumb-icon i {
  font-size: 16px;
}

.breadcrumb-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

/* 内容和目录的容器 */
.content-with-toc {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  min-height: 0;
}

.content-wrapper {
  padding: 0;
  max-width: none;
  margin: 0;
  width: 100%;
  overflow-y: visible;
  background-color: #ffffff;
  transition: padding-right 0.3s ease;
}

/* 当目录显示时，给内容添加右侧空间 */
.content-with-toc.toc-visible .content-wrapper {
  padding-right: calc(var(--toc-width) + var(--scrollbar-width));
}

/* 页面菜单按钮 */
.page-menu-button {
  user-select: none;
  transition: background 20ms ease-in;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background-color: transparent;
  padding: 0;
  flex-shrink: 0;
  position: relative;
}

.page-menu-button:hover {
  background-color: #F0EFED;
}

.page-menu-button:active {
  background-color: #E8E6E2;
}

.page-menu-button svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: #494840;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}

/* 菜单图标和折叠图标的容器 */
.page-menu-button .menu-icon,
.page-menu-button .collapse-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.1s ease;
}

.page-menu-button .menu-icon {
  opacity: 1;
}

.page-menu-button .collapse-icon {
  opacity: 0;
  pointer-events: none;
}

.page-menu-button .collapse-icon svg {
  transition: fill 0.2s ease;
}

/* 宽度 >= 移动端断点时，悬停显示折叠图标 */
/* 断点值: 760px (与 JavaScript 中的 MOBILE_BREAKPOINT 保持一致) */
@media (min-width: 760px) {
  .page-menu-button:hover .menu-icon {
    opacity: 0;
  }
  
  .page-menu-button:hover .collapse-icon {
    opacity: 1;
    pointer-events: auto;
  }
}

/* 宽度 < 移动端断点时，折叠图标始终隐藏 */
@media (max-width: 767px) {
  .page-menu-button .collapse-icon {
    display: none !important;
  }
  
  .page-menu-button .menu-icon {
    opacity: 1 !important;
  }
}

/* 更多按钮样式 */
.more-button {
  user-select: none;
  transition: background 20ms ease-in;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background-color: transparent;
  padding: 0;
  flex-shrink: 0;
}

.more-button:hover {
  background-color: #F0EFED;
}

.more-button:active {
  background-color: #E8E6E2;
}

.more-button svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: #494840;
  flex-shrink: 0;
}

/* 页面菜单按钮容器 */
.page-menu-button-container {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* 更多按钮容器 */
.more-button-container {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* 页面菜单 */
.page-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  width: 240px;
  max-height: calc(100vh - 50px - 4px - 100px); /* 视口高度 - 顶栏高度 - margin - 底部空隙 */
  border-radius: 10px;
  background: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 14px 28px -6px, 
              rgba(0, 0, 0, 0.06) 0px 2px 4px -1px, 
              rgba(84, 72, 49, 0.08) 0px 0px 0px 1px;
  overflow: hidden;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
  display: flex;
  flex-direction: column;
}

.page-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.page-menu-header {
  font-size: 12px;
  font-weight: 600;
  color: #5F5E5B;
  padding: 8px 12px 4px 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-menu-body {
  overflow-y: auto;
  padding: 4px;
  flex: 1;
  min-height: 0; /* 允许 flex 子元素缩小 */
}

.page-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  margin: 2px 0px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 20ms ease-in;
  color: #5F5E5B;
  font-size: 14px;
}

.page-menu-item:hover {
  background-color: #F1F0EF;
}

.page-menu-item.active {
  background-color: #E9E8E7;
  color: #32302C;
}

.page-menu-item-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-menu-item-icon svg,
.page-menu-item-icon img {
  width: 18px;
  height: 18px;
  display: block;
}

.page-menu-item-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 更多菜单 */
.more-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  width: 256px;
  border-radius: 10px;
  background: white;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 14px 28px -6px, 
              rgba(0, 0, 0, 0.06) 0px 2px 4px -1px, 
              rgba(84, 72, 49, 0.08) 0px 0px 0px 1px;
  overflow: hidden;
  padding: 8px 4px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}

.more-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 菜单选项组 */
.more-menu .option-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* 菜单分割线 */
.more-menu .divider {
  position: relative;
  height: 1px;
  margin-top: 5px;
  margin-bottom: 4px;
}

.more-menu .divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
  height: 1px;
  background: rgba(55, 53, 47, 0.09);
}

/* 菜单项 */
.more-menu .menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 28px;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  transition: background 20ms ease-in;
  color: rgb(55, 53, 47);
  box-sizing: border-box;
}

.more-menu .menu-item:hover {
  background-color: rgba(55, 53, 47, 0.08);
}

/* 菜单图标容器 */
.more-menu .icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.more-menu .icon-container svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: rgb(55, 53, 47);
}

/* 菜单标签 */
.more-menu .label {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 滑动开关容器 */
.more-menu .switch-container {
  display: flex;
  flex-shrink: 0;
  height: 14px;
  width: 26px;
  border-radius: 44px;
  padding: 2px;
  box-sizing: content-box;
  background: rgba(55, 53, 47, 0.16);
  transition: background 150ms ease-out;
}

/* 滑动开关的圆形滑块 */
.more-menu .switch-knob {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  transition: transform 150ms ease-out;
  transform: translateX(0px);
}

/* 开关开启状态 */
.more-menu .switch-container.on {
  background: rgb(35, 131, 226);
}

.more-menu .switch-container.on .switch-knob {
  transform: translateX(12px);
}

/* 菜单底部 */
.more-menu .menu-footer {
  padding: 4px 8px 0px 8px;
}

.more-menu .footer-text {
  font-size: 12px;
  line-height: 16px;
  color: rgb(168, 164, 156);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 自定义Tooltip样式 */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  z-index: 1000;
  background-color: rgb(44, 44, 43, 0.8);
  color: rgb(240, 239, 237);
  font-size: 12px;
  line-height: 1.4;
  padding: 5px 8px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.1s ease, visibility 0.1s ease, transform 0.1s ease;
  transition-delay: 0s;
}

[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
  transition-delay: 0.5s;
}

/* 为页面菜单按钮定位tooltip - 显示在按钮下方左侧 */
.page-menu-button[data-tooltip]::before {
  top: 100%;
  left: 0;
  transform: translateY(6px);
  margin-top: 2px;
}

.page-menu-button[data-tooltip]:hover::before {
  transform: translateY(8px);
}

/* 为移动端目录按钮定位tooltip - 显示在按钮左侧 */
.mobile-toc-button[data-tooltip]::before {
  top: 50%;
  right: 100%;
  transform: translateY(-50%) translateX(-8px);
  margin-right: 2px;
}

.mobile-toc-button[data-tooltip]:hover::before {
  transform: translateY(-50%) translateX(-10px);
}

/* 为更多按钮定位tooltip - 显示在按钮下方右侧 */
.more-button[data-tooltip]::before {
  top: 100%;
  right: 0;
  transform: translateY(6px);
  margin-top: 2px;
}

.more-button[data-tooltip]:hover::before {
  transform: translateY(8px);
}

/* 响应式设计 */

/* 小于 1200px */
@media (max-width: 1200px) {
  .content-header {
    padding: 0 15px;
  }
  
  .breadcrumb-title {
    max-width: calc(100vw - 100px);
  }
}

@media (max-width: 480px) {
  .breadcrumb-title {
    max-width: calc(100vw - 80px);
  }
}



/* --- 覆盖 wolai.css 的设置 --- */

/* 全局图片渲染优化 */
article figure > img {
  /* 优先使用此属性，指示浏览器优化对比度，保持锐利 */
  image-rendering: -webkit-optimize-contrast;
  
  /* 这是标准属性，让浏览器在缩放时保持硬边缘，不做平滑处理 */
  image-rendering: crisp-edges;
}

/* 实现图片居中 */
article figure {
  /* 设置上下边距，并将左右边距设为 auto 来实现图片居中 */
  margin: 4px auto;
}

body.less-lead article figure {
  margin: 2px auto;
}

body.more-lead article figure {
  margin: 6px auto;
}

/* 移动端：图片和公式支持横向滚动 */
@media (max-width: 760px) {
  /* 图片容器支持横向滚动 */
  article figure {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
  }
  
  /* 公式支持横向滚动 */
  span.katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    display: block;
    max-width: 100%;
  }
  
  /* 代码块支持横向滚动 */
  div.wolai-pre {
    overflow-x: auto;
    max-width: 100%;
  }
  
  /* 移动端隐藏所有tooltip提示 */
  [data-tooltip]::before {
    display: none !important;
  }
}

/* 图片查看器模态窗口 */
.image-viewer-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  overflow: hidden;
}

.image-viewer-modal.show {
  opacity: 1;
  visibility: visible;
}

.image-viewer-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.image-viewer-img {
  display: block;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: transform 0.1s ease;
  cursor: grab;
  /* 桌面端：以实际大小显示，移动端：适应屏幕 */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* 固定变换原点为图片中心 */
  transform-origin: center center;
  /* 防止图片过小时被拉伸 */
  object-fit: contain;
}

.image-viewer-img:active {
  cursor: grabbing;
}

/* 笔记中的图片可点击提示 */
.content-wrapper img {
  cursor: pointer;
}

/* 全宽模式 - 通过给 body 添加 full-width 类来启用 */
body.full-width .content-wrapper article {
  max-width: 100% !important;
}

body.full-width .content-wrapper header > div.title {
  max-width: 100% !important;
}

/* 移动端目录悬浮按钮 */
.mobile-toc-button {
  display: none; /* 默认隐藏 */
  position: fixed;
  top: 70px; /* 在顶栏下方一点 */
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background-color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 200;
  transition: all 0.2s ease;
  align-items: center;
  justify-content: center;
}

.mobile-toc-button:active {
  transform: scale(0.95);
}

/* 隐藏悬浮按钮 */
.mobile-toc-button.hidden {
  display: none !important;
}

.mobile-toc-button svg {
  width: 20px;
  height: 20px;
  fill: #494840;
}

/* 移动端显示悬浮按钮 */
@media (max-width: 760px) {
  .mobile-toc-button {
    display: flex !important;
  }
}

/* 目录侧边栏 - 固定在右侧 */
.toc-sidebar {
  position: fixed;
  top: 50px; /* 与 content-header 的高度对齐 */
  right: 0;
  width: 0;
  height: calc(100vh - 50px);
  background-color: #FFFFFF;
  border-left: 1px solid transparent;
  overflow: hidden;
  transition: width 0.3s ease, border-color 0.3s ease, right 0.3s ease;
  z-index: 100;
}

.toc-sidebar.show {
  width: var(--toc-width);
  right: var(--scrollbar-width); /* 留出滚动条空间 */
  border-left: 1px solid #EAEAEA;
}

/* 移动端目录浮动模式 */
@media (max-width: 760px) {
  .toc-sidebar {
    top: 50px; /* 从顶栏下方开始 */
    height: calc(100vh - 50px - 50px); /* 下方留出50px空隙 */
  }
  
  .toc-sidebar.show {
    width: 280px;
    right: 0; /* 移动端不留滚动条空间 */
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    border-radius: 12px 0 0 12px; /* 左侧上下圆角 */
  }
  
  /* 移动端隐藏目录头部，节省空间 */
  .toc-sidebar .toc-header {
    display: none;
  }
  
  /* 移动端目录不挤压内容 */
  .content-with-toc.toc-visible .content-wrapper {
    padding-right: 0 !important;
  }
}

/* 目录主容器 */
.toc-container {
  width: var(--toc-width);
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}

/* 目录头部 */
.toc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #EAEAEA;
  flex-shrink: 0;
}

.toc-title {
  font-size: 14px;
  color: #8E8E8E;
}

.toc-header-icon svg {
  display: block;
  fill: #8E8E8E;
}

/* 目录内容区域 */
.toc-body {
  overflow-y: auto;
  flex: 1;
  padding: 8px 4px;
}

/* 目录项 */
.toc-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  color: #3C4248;
  margin: 2px 0px;
}

.toc-item:hover {
  background-color: #F5F5F5;
}

/* 目录项激活状态（当前浏览位置） */
.toc-item.active {
  background-color: #F5F5F5;
}

/* 标题级别样式 - 缩进由JavaScript动态设置 */

/* 折叠图标 */
.toggle-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  fill: #707070;
  flex-shrink: 0;
  margin-left: 2px;
}

.toggle-icon svg {
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}

.toggle-icon.collapsed svg {
  transform: rotate(-90deg);
}

/* 隐藏没有子项的折叠图标 */
.toggle-icon.no-children {
  visibility: hidden;
}

/* 目录项文本 */
.toc-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 5px 4px;
  flex: 1;
}

/* ==================== giscus 评论区样式 ==================== */

/* 评论区容器 - 默认显示 */
.giscus-comments-section {
  max-width: 900px;
  margin: 60px auto 40px;
  padding: 0 20px;
  transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
}

/* 评论区标题 */
.giscus-comments-title {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e0e0e0;
}

/* 评论区内容容器 */
.giscus-comments-container {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  min-height: 200px; /* 确保有最小高度 */
}

/* 当评论区开关关闭时隐藏评论区 */
body:not(.comments-visible) .giscus-comments-section {
  display: none !important;
}

/* 当评论区开关关闭时，同时隐藏目录中的评论区条目 */
body:not(.comments-visible) .giscus-toc-item {
  display: none !important;
}

/* 响应式设计 - 移动端 */
@media (max-width: 768px) {
  .giscus-comments-section {
    margin: 40px auto 20px;
    padding: 0 15px;
  }
  
  .giscus-comments-title {
    font-size: 20px;
  }
  
  .giscus-comments-container {
    padding: 15px;
  }
}